<template>
  <main>
    <p id="no-item" v-if="list.length === 0">暂无数据。</p>
    <div id="items" v-else>
      <div 
        v-for="(item, index) in list"
        :key="item.id"
        class="read-item"
        :class="{selected: index === currentIndex}"
        @click="handleClick(item)"
      >
        <img :src="item.img" alt="item.title">
        <h2>{{item.title}}</h2>
      </div>
    </div>
  </main>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import useList from './hooks/useList'
  import useIndex from './hooks/useIndex'

  export default defineComponent({
    setup() {
      const { list } = useList()
      const { currentIndex, handleClick } = useIndex()

      return {
        list,
        currentIndex,
        handleClick
      }
    }
  })
</script>

<style lang='stylus' scoped>
#items
  flex-grow 1

#no-item
  font-weight bold
  color silver 
  text-align center
  width 100%
  position absolute
  top 100px
  z-index -1

.read-item
  display flex
  align-items center
  align-content center
  border-bottom lightgray 2px solid 
  background #fafafa
  padding 10px
  border-left 10px solid lightgray
  -webkit-user-select none
  img 
    width 20%
    margin-right 25px
    border solid 1px #ccc
  &:hover
    background #eee
  &.selected
    border-left-color dodgerblue
</style>